<template>
  <div id="app">
    <div class="warp">
      <div class="head">
        <div class="head-title">煤矿智能化运维服务平台</div>
        <div class="message-list">
          <ul>
            <span
              ><div
                role="tooltip"
                id="el-popover-5477"
                aria-hidden="true"
                class="el-popover el-popper"
                tabindex="0"
                style="display: none"
              >
                <!---->
                <div class="el-tabs el-tabs--top">
                  <div class="el-tabs__header is-top">
                    <div class="el-tabs__nav-wrap is-top">
                      <div class="el-tabs__nav-scroll">
                        <div
                          role="tablist"
                          class="el-tabs__nav is-top"
                          style="transform: translateX(0px)"
                        >
                          <div
                            class="el-tabs__active-bar is-top"
                            style="width: 0px; transform: translateX(0px)"
                          ></div>
                          <div
                            id="tab-android"
                            aria-controls="pane-android"
                            role="tab"
                            aria-selected="true"
                            tabindex="0"
                            class="el-tabs__item is-top is-active"
                          >
                            <span
                              ><span class="iconfont icon-android"></span>
                              android 版</span
                            >
                          </div>
                          <div
                            id="tab-ios"
                            aria-controls="pane-ios"
                            role="tab"
                            tabindex="-1"
                            class="el-tabs__item is-top"
                          >
                            <span
                              ><span class="iconfont icon-ios"></span> IOS
                              版</span
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="el-tabs__content">
                    <div
                      role="tabpanel"
                      id="pane-android"
                      aria-labelledby="tab-android"
                      class="el-tab-pane"
                    >
                      <ul class="android-list">
                        <li>
                          <span
                            ><div
                              role="tooltip"
                              id="el-popover-9780"
                              aria-hidden="true"
                              class="el-popover el-popper show-code"
                              tabindex="0"
                              style="width: 100px; display: none"
                            >
                              <!---->
                              <div
                                class="el-image"
                                style="
                                  width: 100px;
                                  height: 100px;
                                  padding: 0px;
                                "
                              >
                                <img
                                  src="/img/fws_qr1.ded0c058.png"
                                  class="el-image__inner"
                                /><!---->
                              </div>
                            </div>
                            <span class="el-popover__reference-wrapper"
                              ><div
                                class="el-image el-popover__reference"
                                aria-describedby="el-popover-9780"
                                tabindex="0"
                                style="width: 100px; height: 100px"
                              >
                                <img
                                  src="/img/fws.47ecf97a.png"
                                  class="el-image__inner"
                                /><!---->
                              </div></span
                            ></span
                          >
                        </li>
                        <li>
                          <span
                            ><div
                              role="tooltip"
                              id="el-popover-7877"
                              aria-hidden="true"
                              class="el-popover el-popper show-code"
                              tabindex="0"
                              style="width: 100px; display: none"
                            >
                              <!---->
                              <div
                                class="el-image"
                                style="
                                  width: 100px;
                                  height: 100px;
                                  padding: 0px;
                                "
                              >
                                <img
                                  src="/img/mk_qr1.97c2dc15.png"
                                  class="el-image__inner"
                                /><!---->
                              </div>
                            </div>
                            <span class="el-popover__reference-wrapper"
                              ><div
                                class="el-image el-popover__reference"
                                aria-describedby="el-popover-7877"
                                tabindex="0"
                                style="width: 100px; height: 100px"
                              >
                                <img
                                  src="/img/mk.4ac9e31d.png"
                                  class="el-image__inner"
                                /><!---->
                              </div></span
                            ></span
                          >
                        </li>
                        <li>
                          <span
                            ><div
                              role="tooltip"
                              id="el-popover-8871"
                              aria-hidden="true"
                              class="el-popover el-popper show-code"
                              tabindex="0"
                              style="width: 100px; display: none"
                            >
                              <!---->
                              <div
                                class="el-image"
                                style="
                                  width: 100px;
                                  height: 100px;
                                  padding: 0px;
                                "
                              >
                                <img
                                  src="/img/zw_qr1.fc7a3701.png"
                                  class="el-image__inner"
                                /><!---->
                              </div>
                            </div>
                            <span class="el-popover__reference-wrapper"
                              ><div
                                class="el-image el-popover__reference"
                                aria-describedby="el-popover-8871"
                                tabindex="0"
                                style="width: 100px; height: 100px"
                              >
                                <img
                                  src="/img/zf.f954e5a3.png"
                                  class="el-image__inner"
                                /><!---->
                              </div></span
                            ></span
                          >
                        </li>
                      </ul>
                    </div>
                    <div
                      role="tabpanel"
                      aria-hidden="true"
                      id="pane-ios"
                      aria-labelledby="tab-ios"
                      class="el-tab-pane"
                      style="display: none"
                    >
                      <div class="ios-list">
                        <i class="el-icon-s-tools"></i>敬请期待
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <span class="el-popover__reference-wrapper"
                ><li
                  class="el-popover__reference"
                  aria-describedby="el-popover-5477"
                  tabindex="0"
                >
                  app下载
                  <i class="el-icon-download"></i></li></span
            ></span>
            <li style="font-size: 16px">欢迎您，煤矿！</li>
            <li style="margin: 0px 20px 0px 16px">
              <div class="el-badge item special-badge">
                <img
                  src=""
                  style="width: 20px; height: 21px"
                /><sup
                  class="el-badge__content el-badge__content--undefined is-fixed"
                  >0</sup
                >
              </div>
            </li>
            <li style="cursor: auto">
              <div class="user-icon">
                <i class="el-icon-user-solid"></i>
              </div>
            </li>
            <li style="margin-left: 7px">
              <el-dropdown>
                <span class="el-dropdown-link">
                  mk0542<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <router-link to="/datav">
                    <el-dropdown-item>大屏</el-dropdown-item>
                  </router-link>
                  <router-link to="MineOperation">
                    <el-dropdown-item>后台</el-dropdown-item>
                  </router-link>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
          </ul>
        </div>
      </div>
      <div class="box">
        <div class="left-wrap left">
          <div class="card-item company" style="height: auto">
            <div class="header-title flex-start">
              <img
                src=""
                alt="icon"
              />
              <h3 class="company-name">煤矿</h3>
            </div>
            <ul class="flex-start company-list">
              <li>
                <div class="cell-item">
                  <div class="cell-item-expire">账户 2026-04-30 到期</div>
                  <a size="mini" class="el-link el-link--primary is-underline"
                    ><!----><span class="el-link--inner">延长服务</span
                    ><!----></a
                  >
                </div>
              </li>
              <li>注册平台时间：2024-05-06</li>
              <!---->
              <li>
                <div class="cell-item">
                  <i class="el-icon-user"></i
                  ><label style="font-weight: 400">***</label>
                </div>
              </li>
              <li>
                <div class="cell-item">
                  <i class="el-icon-phone-outline"></i
                  ><label style="font-weight: 400">15520****77</label>
                </div>
              </li>
              <li>
                <div class="cell-item">
                  <i class="el-icon-location-information"></i
                  ><label style="font-weight: 400"
                    >四川宜宾筠连县沐爱镇新维煤矿</label
                  >
                </div>
              </li>
            </ul>
          </div>
          <!----><!----><!----><!---->
          <div class="card-item">
            <div class="header-title flex">
              <h3>数据上传率</h3>
              <label style="font-weight: 400">2025-06-24 10:51:46</label>
            </div>
            <div class="upload-rate">95.01%</div>
          </div>
          <div class="card-item">
            <div class="header-title flex">
              <h3>运维服务</h3>
            </div>
            <div class="no-datas">
              <span>系统未检测到签约信息</span>
            </div>
          </div>
          <!----><!----><!---->
          <div class="card-item" style="height: 360px">
            <div class="header-title flex">
              <h3>平台公告</h3>
              <i class="el-icon-arrow-right"></i>
            </div>
            <ul class="notice-list">
              <span
                ><li class="flex">
                  <div class="title">系统升级通知</div>
                  <div class="date">2025-05-13</div>
                </li>
                <li class="flex">
                  <div class="title">APP升级通知</div>
                  <div class="date">2025-05-13</div>
                </li></span
              >
            </ul>
          </div>
          <div class="el-dialog__wrapper" style="display: none">
            <div
              role="dialog"
              aria-modal="true"
              aria-label="dialog"
              class="el-dialog"
              style="margin-top: 15vh; width: 38%"
            >
              <div class="el-dialog__header">
                <span class="el-dialog__title"></span
                ><button
                  type="button"
                  aria-label="Close"
                  class="el-dialog__headerbtn"
                >
                  <i class="el-dialog__close el-icon el-icon-close"></i>
                </button>
              </div>
              <!----><!---->
            </div>
          </div>
        </div>
        <div class="middle-wrap middle">
          <div class="carousel-list el-carousel el-carousel--horizontal">
            <div class="el-carousel__container" style="height: 211px">
              <button
                type="button"
                class="el-carousel__arrow el-carousel__arrow--left"
                style="display: none"
              >
                <i class="el-icon-arrow-left"></i></button
              ><button
                type="button"
                class="el-carousel__arrow el-carousel__arrow--right"
                style="display: none"
              >
                <i class="el-icon-arrow-right"></i>
              </button>
              <el-carousel
                type="card"
                height="180px"
                indicator-position="outside"
              >
                <el-carousel-item
                  v-for="item in 3"
                  :key="item"
                  class="carousel__item"
                >
                  <img src="./img/banner-1.png" v-if="item == 1" />
                  <img src="./img/banner-2.png" v-if="item == 2" />
                  <img src="./img/banner-3.png" v-if="item == 3" />
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
          <div class="card-item">
            <div class="header-title">
              <h3>快捷入口</h3>
            </div>
            <ul class="flex quick-list">
              <li>
                <img
                  src=""
                />
                <div class="sub-title">生产现场一目了然</div>
                <div class="title">视频监控&gt;</div>
              </li>
              <li>
                <img
                  src=""
                />
                <div class="sub-title">煤矿运行一览无余</div>
                <div class="title">煤矿运行监控&gt;</div>
              </li>
              <li>
                <img
                  src=""
                />
                <div class="sub-title">运维工作一手掌握</div>
                <div class="title">煤矿运维监控&gt;</div>
              </li>
              <!----><!----><!---->
              <li>
                <img
                  src=""
                />
                <div class="sub-title">运维数据</div>
                <div class="title">报表报告&gt;</div>
              </li>
              <!---->
            </ul>
          </div>
          <div class="card-item">
            <div class="header-title">
              <h3>业务应用</h3>
            </div>
            <ul class="flex data-list">
              <li>
                <img
                  src=""
                />
                <div class="title">运维业务系统</div>
              </li>
              <!----><!---->
              <li>
                <div class="add-app">
                  <i class="el-icon-circle-plus"></i>
                </div>
                <div class="title">添加应用</div>
              </li>
            </ul>
          </div>
          <div class="card-item">
            <div class="header-title">
              <h3>平台服务</h3>
            </div>
            <ul class="flex data-list">
              <li>
                <img
                  src=""
                />
                <div class="title">生产管理</div>
              </li>
              <li>
                <img
                  src=""
                />
                <div class="title">人员定位</div>
              </li>
              <li>
                <img
                  src=""
                />
                <div class="title">瓦斯预警</div>
              </li>
              <li>
                <img
                  src=""
                />
                <div class="title">瓦斯地质</div>
              </li>
              <li>
                <img
                  src=""
                />
                <div class="title">钻杆监测</div>
              </li>
              <li>
                <img
                  src=""
                />
                <div class="title">物资管理</div>
              </li>
              <li>
                <div class="add-app">
                  <i class="el-icon-circle-plus"></i>
                </div>
                <div class="title">添加应用</div>
              </li>
            </ul>
          </div>
          <div class="card-item">
            <div class="header-title flex">
              <h3>数据服务</h3>
            </div>
            <ul class="flex data-list">
              <li>
                <img
                  src=""
                />
                <div class="title">资源管理</div>
              </li>
              <li>
                <img
                  src=""
                />
                <div class="title">数据接入</div>
              </li>
              <li>
                <img
                  src=""
                />
                <div class="title">数据标准</div>
              </li>
              <li>
                <img
                  src=""
                />
                <div class="title">数据治理</div>
              </li>
              <li>
                <div class="add-app">
                  <i class="el-icon-circle-plus"></i>
                </div>
                <div class="title">添加应用</div>
              </li>
            </ul>
          </div>
          <div class="el-dialog__wrapper" style="display: none">
            <div
              role="dialog"
              aria-modal="true"
              aria-label="添加应用"
              class="el-dialog"
              style="margin-top: 15vh; width: 30%"
            >
              <div class="el-dialog__header">
                <span class="el-dialog__title">添加应用</span
                ><button
                  type="button"
                  aria-label="Close"
                  class="el-dialog__headerbtn"
                >
                  <i class="el-dialog__close el-icon el-icon-close"></i>
                </button>
              </div>
              <!---->
              <div class="el-dialog__footer">
                <span class="dialog-footer"
                  ><button
                    type="button"
                    class="el-button el-button--default el-button--small"
                  >
                    <!----><!----><span>取 消</span></button
                  ><button
                    type="button"
                    class="el-button el-button--primary el-button--small"
                  >
                    <!----><!----><span>确 定</span>
                  </button></span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="right-wrap right">
          <div class="right-wrap right">
            <div class="card-item" style="height: 193px">
              <div class="header-title flex">
                <h3>
                  政府巡查
                  <i
                    class="el-tooltip el-icon-question item"
                    aria-describedby="el-tooltip-8703"
                    tabindex="0"
                    style="
                      padding-left: 5px;
                      color: rgb(255, 137, 11);
                      font-size: 20px;
                      opacity: 0.7;
                    "
                  ></i>
                </h3>
                <i class="el-icon-arrow-right"></i>
              </div>
              <ul class="flex supervise-list">
                <li class="child1">
                  <div class="title">本年巡查</div>
                  <div class="value">0</div>
                </li>
                <li class="child2">
                  <div class="title">巡查待整改</div>
                  <div class="value">0</div>
                </li>
                <li class="child3">
                  <div class="title">巡查待审核</div>
                  <div class="value">0</div>
                </li>
              </ul>
            </div>
            <!---->
            <div class="card-item" style="height: 389px">
              <div class="header-title flex">
                <h3>运维工作</h3>
              </div>
              <div class="work-title el-divider el-divider--horizontal">
                <div class="el-divider__text is-center">远程故障诊断</div>
              </div>
              <ul class="flex work-list">
                <li>
                  <div class="title">近30天远程诊断</div>
                  <div class="value">60</div>
                </li>
                <li>
                  <div class="title">待核实</div>
                  <div class="value">60</div>
                </li>
                <li>
                  <div class="title">处理中</div>
                  <div class="value">0</div>
                </li>
              </ul>
              <div class="work-title el-divider el-divider--horizontal">
                <div class="el-divider__text is-center">活动维修单</div>
              </div>
              <ul class="flex work-list">
                <li>
                  <div class="title">待维修</div>
                  <div class="value">0</div>
                </li>
                <li>
                  <div class="title">待确认</div>
                  <div class="value">0</div>
                </li>
                <li>
                  <div class="title">待评价</div>
                  <div class="value">0</div>
                </li>
              </ul>
              <div class="work-title el-divider el-divider--horizontal">
                <div class="el-divider__text is-center">巡检工作</div>
              </div>
              <ul class="flex work-list">
                <li>
                  <div class="title">巡检计划</div>
                  <div class="value">0</div>
                </li>
                <li>
                  <div class="title">待巡检</div>
                  <div class="value">0</div>
                </li>
                <li>
                  <div class="title">异常处理</div>
                  <div class="value">0</div>
                </li>
              </ul>
            </div>
            <div class="card-item" style="height: 348px">
              <div class="header-title flex">
                <h3>运维动态</h3>
              </div>
              <ul class="dynamic-list">
                <li>
                  <div class="flex top-info">
                    <div class="date">2025-06-16 15:31</div>
                    <div class="add-order">维修</div>
                  </div>
                  <div class="lists">
                    <div class="items">运维单号：WXD202506160132</div>
                  </div>
                </li>
                <li>
                  <div class="flex top-info">
                    <div class="date">2025-06-16 15:31</div>
                    <div class="add-order">完成</div>
                  </div>
                  <div class="lists">
                    <div class="items">运维单号：WXD202506160132</div>
                  </div>
                </li>
                <li>
                  <div class="flex top-info">
                    <div class="date">2025-06-16 15:31</div>
                    <div class="add-order">维修</div>
                  </div>
                  <div class="lists">
                    <div class="items">运维单号：WXD202506166391</div>
                  </div>
                </li>
              </ul>
            </div>
            <!----><!---->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "dashboard",
  data() {
    return {
      carouselImg: [
        "./img/banner-1.png",
        "./img/banner-2.png",
        "./img/banner-3.png",
      ],
    };
  },
  methods: {},
};
</script>

<style scoped lang="scss">
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  .warp {
    width: 100%;
    height: 100%;
    position: absolute;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 70px;
      padding: 0 24px;
      background: #141e53;
      overflow: hidden;
      color: #fff;
      .head-title {
        color: #fff;
        font-weight: 700;
        font-size: 22px;
        letter-spacing: 2px;
      }
      .message-list {
        display: block;
        unicode-bidi: isolate;
        ul {
          display: flex;
          align-items: center;
          margin: 0;
          padding: 0;
        }
        li {
          color: #fff;
          list-style: none;
          margin-right: 10px;
        }
        .item {
          margin-top: 10px;
          margin-right: 10px;
        }
        .user-icon {
          width: 40px;
          height: 40px;
          background-color: #ebf3ff;
          border-radius: 50%;
          .el-icon-user-solid {
            padding: 10px 0 0 6px;
            color: #aabbd4;
            font-size: 28px;
          }
        }
        .el-dropdown {
          display: inline-block;
          position: relative;
          color: #606266;
          font-size: 14px;
          .el-icon-arrow-down {
            font-size: 12px;
          }
          .el-icon--right {
            margin-left: 5px;
          }
          .el-dropdown-menu {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
            padding: 10px 0;
            margin: 5px 0;
            background-color: #ffffff;
            border: 1px solid #e6ebf5;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            .el-dropdown-menu--small {
              line-height: 27px;
              padding: 0 15px;
              font-size: 13px;
            }
            .el-dropdown-menu__item {
              list-style: none;
              line-height: 36px;
              padding: 0 20px;
              margin: 0;
              font-size: 14px;
              color: #606266;
              outline: none;
            }
            .el-dropdown-menu__item {
              line-height: 27px;
              padding: 0 15px;
              font-size: 13px;
            }
          }
        }
      }
    }
    .box {
      display: flex;
      justify-content: space-between;
      margin: 0;
      padding: 24px 22px;
      width: 100%;
      background-color: #eef2fb;
      h3 {
        display: block;
        font-size: 1.17em;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
        unicode-bidi: isolate;
      }
      .left {
        width: 450px;
        .card-item {
          position: relative;
          width: 100%;
          height: 152px;
          padding: 15px 16px;
          background: #fff;
          border: 1px solid #e7ebf4;
          border-radius: 4px;
          .company {
            height: 190px;
          }
        }
        .header-title {
          color: #333;
        }
        .flex-start {
          display: flex;
          align-items: center;
          img {
            width: 20px;
            height: 20px;
          }
          h3 {
            margin: 0;
            padding-left: 8px;
            font-size: 16px;
            border-left: 4px solid #017aff;
            .company-name {
              border-left: 0;
            }
          }
          ul {
            padding: 0;
            margin: 0;
          }
        }
        .company-list {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          padding: 10px 30px 0 30px;
          li {
            display: flex;
            align-items: center;
            width: 100%;
            margin-bottom: 20px;
          }
          .el-link--primary {
            color: #1890ff;
          }
          .el-link {
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
            position: relative;
            text-decoration: none;
            outline: none;
            padding: 0;
            font-size: 14px;
            font-weight: 500;
          }
        }
        .cell-item {
          flex: 1;
          display: flex;
          align-items: center;
          font-size: 16px;
          .cell-item-expire {
            margin-right: 10px;
            color: #67c23a;
          }
          i {
            margin-right: 5px;
          }
        }
        .el-icon-phone-outline {
          font-family: element-icons !important;
          font-style: normal;
          font-weight: 400;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          vertical-align: baseline;
          display: inline-block;
        }
        .el-icon-user {
          font-family: "element-icons" !important;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          vertical-align: baseline;
          display: inline-block;
        }
        .flex {
          display: flex;
          align-items: center;
          justify-content: space-between;
          h3 {
            margin: 0;
            padding-left: 8px;
            font-size: 16px;
            border-left: 4px solid #017aff;
          }
        }
        .upload-rate {
          width: 108px;
          height: 108px;
          margin: 0 auto;
          line-height: 108px;
          text-align: center;
          color: #fff;
          font-size: 24px;
          font-weight: 700;
          background: url()
            0 no-repeat;
        }
        i {
          font-size: 20px;
          cursor: pointer;
        }
        .no-datas {
          position: absolute;
          top: 25px;
          left: 32%;
          padding-top: 94px;
          background: url(./img/no-data-bg.5be02856.png) top no-repeat;
          background-size: 100px 91px;
          text-align: center;
        }
        .el-icon-arrow-right {
          font-family: element-icons !important;
          font-style: normal;
          font-weight: 400;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          vertical-align: baseline;
          display: inline-block;
        }
      }
      .middle {
        width: 910px;
        .carousel__item {
          width: 100%;
          left: -25%;
        }
        .card-item {
          width: 100%;
          margin-top: 15px;
          padding: 15px 0;
          background: #fff;
          border: 1px solid #e7ebf4;
          border-radius: 4px;
          .header-title {
            padding: 0 20px;
            color: #333;
            h3 {
              margin: 0;
              padding-left: 8px;
              font-size: 16px;
              border-left: 4px solid #017aff;
            }
          }
          .quick-list {
            justify-content: space-between;
          }
          ul {
            margin: 24px 0 0;
            padding: 0 32px;
          }
          .flex {
            display: flex;
            align-items: center;
          }
          .add-app {
            width: 66px;
            height: 66px;
            background-color: #ececec;
            border-radius: 8px;
            i {
              margin-top: 15px;
              color: #d0d0d0;
              font-size: 28px;
            }
            .el-icon-circle-plus {
              font-family: "element-icons" !important;
              font-style: normal;
              font-weight: normal;
              font-variant: normal;
              text-transform: none;
              line-height: 1;
              vertical-align: baseline;
              display: inline-block;
            }
          }
          li {
            list-style: none;
            text-align: center;
            margin-left: 23px;
            .sub-title {
              margin-bottom: 5px;
              color: #8d99b2;
              font-size: 14px;
            }
            .title {
              color: #333;
              font-size: 15px;
            }
            img {
              width: 66px;
              height: 66px;
            }
          }
        }
      }
      .right {
        width: 450px;
        .card-item {
          width: 100%;
          padding: 15px 0;
          background: #fff;
          border: 1px solid #e7ebf4;
          border-radius: 4px;
          margin-bottom: 15px;
          .header-title {
            padding: 0 16px;
            color: #333;
            h3 {
              margin: 0;
              padding-left: 8px;
              font-size: 16px;
              border-left: 4px solid #017aff;
            }
            .el-icon-arrow-right {
              font-family: element-icons !important;
              font-style: normal;
              font-weight: 400;
              font-variant: normal;
              text-transform: none;
              line-height: 1;
              vertical-align: baseline;
              display: inline-block;
            }
          }
          .flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          ul {
            padding: 0;
            margin: 0;
          }
          .supervise-list {
            margin: 30px 9px 0 6px;
            .child1 {
              background: url(./img/yw-bg-1.png) 0 no-repeat;
              background-size: 158px 108px;
            }
            .child2 {
              background: url(./img/yw-bg-2.png) 0 no-repeat;
              background-size: 158px 108px;
            }
            .child3 {
              background: url(./img/yw-bg-3.png) 0 no-repeat;
              background-size: 158px 108px;
            }
            li {
              width: 158px;
              height: 108px;
              padding-top: 22px;
              padding-left: 25px;
              list-style: none;
              .title {
                color: #fff;
              }

              .value {
                margin-top: 3px;
                color: #fff;
                font-size: 30px;
              }
            }
          }
          .work-title {
            width: auto;
            margin: 26px 25px;
          }
          .el-divider {
            background-color: #dcdfe6;
            position: relative;
          }
          .el-divider--horizontal {
            display: block;
            height: 1px;
            width: 100%;
            margin: 24px 0;
          }
          .el-divider__text {
            color: #333;
            font-size: 14px;
            font-weight: 700;
          }
          .work-list {
            margin-top: 10px;
            li {
              flex: 1;
              text-align: center;
              list-style: none;
              .title {
                margin: 0px auto 10px auto;
                text-align: center;
                color: #707070;
              }

              .value {
                margin-top: 5px;
                color: #2976f3;
                font-size: 30px;
              }
            }
          }
          .dynamic-list {
            padding: 0 18px;
            li {
              width: 100%;
              height: 89px;
              padding: 0 17px;
              margin-top: 10px;
              border: 1px solid #e7ebf4;
              border-radius: 4px;
              list-style: none;
              .top-info {
                padding: 5px 0;
                border-bottom: 1px solid #e7ebf4;
                .date {
                  color: #333;
                  font-size: 16px;
                }
                .add-order {
                  color: #999;
                  font-size: 14px;
                }
              }
              .flex {
                display: flex;
                justify-content: space-between;
                align-items: center;
              }
              .items {
                margin-top: 7px;
                color: #777;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
}
</style>

